import { useRef } from 'react'
import { useInViewport } from 'ahooks'
import styles from './index.module.less'
import WebsiteImg from '@/assets/report/department/malanhua.png'
// import ManImg from '@/assets/report/department/man.png'
import type { SwiperItemProps, TeacherReportData } from '../../interface'

interface Props extends SwiperItemProps {
    name: TeacherReportData['name']
    create_date: TeacherReportData['create_date']
    live_day: TeacherReportData['live_day']
    platform: TeacherReportData['platform']
}

export const FirstPage = (props: Props) => {
    const isActive = props?.current === props?.itemIndex
    const ref = useRef<HTMLDivElement>(null)
    const [inViewport] = useInViewport(ref, {
        // 在Swiper下需要偏移才能才能正确获取`inViewport`状态
        rootMargin: '-5px',
    })
    if (!isActive && !inViewport) {
        return <div className={styles.first} />
    }

    return (
        <div className={styles.first} ref={ref}>
            <div className={styles.first_center}>
                <img src={WebsiteImg} />
            </div>
            {/* <img className={styles.first_man} src={ManImg} /> */}
            <div className={styles.first_wrapper}>
                <div className={styles.first_wrapper_content}>
                    <h3>{`@${props.name || ''}老师`}</h3>
                    <h3>{props.create_date || ''}</h3>
                    <p>您第一次来到</p>
                    <p className={styles.depart}>{props.platform || '平台'}</p>
                </div>
            </div>

            <div className={styles.first_bottom}>
                <div className={styles.first_bottom_content}>
                    <p>
                        在与您同行的 <span>{props.live_day || 0}</span> 天里，
                    </p>
                    <p>我们之间的默契，无人能取代</p>
                </div>
            </div>
        </div>
    )
}

export default FirstPage
